<template>
  <div class="abcd">
    <scroll class="content" ref="scroll" v-on="$listeners" :type="3">
      <ul class="container">
        <li v-for="(item, index) in foodList" :key="index" ref="FoodListRef">
          <p class="text">{{ item.name }}</p>
          <section
            class="food_info"
            v-for="(subItem, k) in item.children"
            :key="k"
            @click="showFoodDetail(subItem)"
          >
            <!-- <img :src="imageUrl + subItem.food_img" alt="" /> -->
            <!-- 测试图片 -->
            <img src="@/assets/images/02.jpg" alt="" />
            <div class="detail">
              <p class="title">{{ subItem.name }}</p>
              <span class="sales">月销：{{ subItem.sales }}</span>
              <section class="bottom">
                <div class="price">
                  <span>￥{{ subItem.specs[0].price }}</span>
                </div>
                <i
                  class="amount"
                  v-if="subItem.is_specs == 1 && amount(subItem)"
                >
                  {{ amount(subItem) }}
                </i>
                <button
                  class="btn"
                  v-if="subItem.is_specs == 1"
                  @click.stop="showSpecs(subItem)"
                >
                  选规格
                </button>
                <add-cart v-else :foods="subItem" />
              </section>
            </div>
          </section>
        </li>
      </ul>
    </scroll>
    <!-- 规格组件 -->
    <specs :food="foodSpecs" :isShow="is_specs" @removeSpecsView="showSpecs" />
    <!-- 食品详细组件 -->
    <food-detail
      :detail="foodDetail"
      :isShow="is_food_detail"
      @removeFoodDetail="showFoodDetail"
      @showSpecsView="showSpecs"
    />
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll';
import AddCart from './AddCart';
import Specs from './Specs';
import FoodDetail from './FoodDetail';

import { mapState } from 'vuex';
import { imageUrl } from '@/config/env';

export default {
  props: {
    foodList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    menuIndex: Number
  },
  data() {
    return {
      imageUrl, // 图片地址
      tops: [], // 食品列表头部位置
      foodSpecs: {}, // 食品规格
      foodDetail: {}, // 食品详细
      is_food_detail: false, // 显示隐藏食品详细组件
      is_specs: false // 显示隐藏规格组件
    };
  },
  components: {
    Scroll,
    AddCart,
    Specs,
    FoodDetail
  },
  computed: {
    ...mapState(['cartList', 'shop_id']),
    // 选择的食品数量
    amount() {
      return function(food) {
        const shop = this.cartList[this.shop_id];
        const { menu_id, id } = food;
        if (shop && shop[menu_id] && shop[menu_id][id]) {
          let num = 0;
          Object.values(shop[menu_id][id]).forEach(item => {
            num += item.num;
          });
          return num;
        }
        return 0;
      };
    }
  },
  methods: {
    // 显示规格组件
    showSpecs(data, type) {
      if (data) {
        this.foodSpecs = data;
      }
      // 如果是食品详细点击规格则让食品详细组件隐藏
      if (type === 'food') {
        this.is_food_detail = false;
      }
      this.is_specs = !this.is_specs;
    },
    // 显示食品详细
    showFoodDetail(data) {
      if (data) {
        this.foodDetail = data;
      }
      this.is_food_detail = !this.is_food_detail;
    }
  },
  watch: {
    // 食品列表
    foodList() {
      this.$nextTick(() => {
        const list = this.$refs.FoodListRef;
        let num = 0;
        this.tops.push(num);
        list.forEach(item => {
          // clientHeight 得到的高度确实是正确的，但是滚动时每个食品都少了margin-bottom的10px
          num += item.clientHeight + 10;
          this.tops.push(num);
        });
        this.$refs.scroll.refresh();
      });
    },
    // 菜单点击索引
    menuIndex(index) {
      const y = this.tops[index];
      this.$refs.scroll.scrollTo(0, -y);
    }
  }
};
</script>

<style lang="less" scoped>
.abcd {
  width: 100%;
}

.content {
  width: 100%;
  height: calc(100vh - 265px);
  overflow: hidden;
  background-color: #fff;
  .container {
    padding: 0 10px;
  }
  .text {
    padding: 8px 0;
    font-size: var(--font-size);
  }
  .food_info {
    display: flex;
    margin-bottom: 10px;
    img {
      width: 70px;
      height: 70px;
      border-radius: 6px;
      margin-right: 10px;
    }
    .detail {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 18px;
        color: #222;
      }
      .sales {
        font-size: var(--font-min);
      }
      .bottom {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .price {
          color: rgb(226, 5, 5);
          //   span:last-of-type {
          //     font-weight: bold;
          //   }
        }
        .btn {
          font-size: var(--font-min);
          padding: 2px 5px;
          border-radius: 10px;
          color: #222;
          background-color: var(--color-base);
        }
        .amount {
          position: absolute;
          top: -3;
          right: 50px;
          min-width: 18px;
          min-height: 17px;
          text-align: center;
          padding: 2px;
          font-size: var(--font-base);
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
